<template>
  <div class="shopChild-box">
    <swipe :data="data"></swipe>
    <div class="mui-card">
      <div class="mui-card-header">页眉</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）</div>
      </div>购买数量:
      <btn @foucs="btnTxt"></btn>
      <div class="btn">
        <span>立即购买</span>
        <span @click="shop">加入购物车
          <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div v-show="flag"></div>
          </transition>
        </span>
      </div>
    </div>
    <div>
      <span>￥{{page.sell_price}}</span>
      <span>剩余:{{page.stock_quantity}}</span>
    </div>
  </div>
</template>
<script>
import btn from "./btn.vue";
import swipe from "./swiper.vue";
export default {
  data() {
    return {
      id: this.$route.params.id,
      data: "",
      flag: false,
      page:'',
      Count : 1
    };
  },
  created() {
    this.fn();
    this.pageSize()
  },
  methods: {
    fn() {
      this.$http.get("api/getthumimages/" + this.id).then(res => {
        this.data = res.body.message;
      });
    },
    pageSize() {
      this.$http.get('api/goods/getinfo/'+this.id).then(res=>{
        this.page = res.body.message[0]
      })
    },
    shop() {
      this.flag = true;
      let car = { 
        id: this.id,
        count : this.Count,
        price : this.page.sell_price,
        selected : true 
      };
      this.$store.commit('addCar', car)
    },
    
    beforeEnter (el) {
        el.style.transform = "translate(0,0)";
    },
    enter(el,done) {
        
        let shopCar = document.getElementById('nvn'),
        x = shopCar.getBoundingClientRect().left - el.getBoundingClientRect().left,
        y = shopCar.getBoundingClientRect().top -  el.getBoundingClientRect().top

        el.offsetWidth
        el.style.transform = `translate(${x}px,${y}px)`;
  
        el.style.transition = 'all ease .5s'
        done()
    },
    afterEnter() {
        this.flag = false;
    },
    btnTxt(data) {
      this.Count  = data
    }
  },
  components: {
    swipe,
    btn
  }
};
</script>
<style lang="less">

.shopChild-box {
     height: 2000px;
     .mui-card {
        overflow: visible;
     }
  .btn {
    span {
      display: inline-block;
      width: 80px;
      height: 35px;
      text-align: center;
      line-height: 35px;
      color: #fff;
      border-radius: 5px;
      z-index: 99
    }
    span:last-of-type {
      position: relative;
      background: red;
      div {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: red;
        position: absolute;
        top: 10px;
        left: 50%;
      }
    }
    span:first-of-type {
      background: blue;
      margin-right: 8px;
    }
  }
}
</style>


